<template>
  <div class="home">
    <van-nav-bar :title="title" left-arrow class="nav-head">
      <template #left>
        <Back />
      </template>
    </van-nav-bar>
    <div class="user-bg"></div>
    <div class="user-msg">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Back from '../components/Back.vue'

defineProps({
  title: {
    type: String,
    default: '个人资料'
  }
})
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  background-color: rgb(245, 245, 245);
  overflow: auto;
}
.nav-head {
  position: sticky;
  top: 0;
}
.user-bg {
  height: 160px;
  background-color: rgb(12, 52, 186);
}
.user-msg {
  width: 100%;
  position: relative;
  top: -40px;
}
</style>
